前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4

Template Syntax

Vue.js 使用了基於 HTML 的模板語法，允許開發者將 DOM 綁定至底層 Vue 實例的資料。所有 Vue.js 的模板都是合法的 HTML，所以能被適當地傳遞給瀏覽器並被解析。

Text

最基本的資料綁定是使用 Mustache 語法 (雙大括號) 的文本插值，如下所示，msg 的值將會對應到 data 裡面的 msg 的值，當 msg 的值改變時，插值處的內容也會跟著改變。

<span>Message: {{ msg }}</span>

若不想要隨著 data 裡面的值改變而改變，可以使用 v-once 指令，如下所示，v-once 指令將會保留插值處的內容，並且不會隨著 data 裡面的值改變而改變。

<span v-once>This will never change: {{ msg }}</span>

Raw HTML

Vue.js 會將所有資料綁定的文本作為普通的文字來處理，而不會將它們當作 HTML。若要輸出真正的 HTML，你必須使用 v-html 指令，如下所示，v-html 指令將會將 rawHtml 的值當作 HTML 來解析。

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

注意：請確保你只對可信任的內容使用 v-html，因為它可能會導致 XSS 攻擊。

Attributes

Mustaches 不能作用在 HTML 屬性上，必須使用 v-bind 指令來處理，如下所示，v-bind 指令將會將 dynamicId 的值當作屬性來處理。

<div v-bind:id="dynamicId"></div>
```html

在 boolean 屬性上，`v-bind` 指令的工作方式稍有不同，因為它們只能表達其存在與否，如下所示，`buttonDisabled` 的值為 `true` 時，`disabled` 屬性會被加上，反之則不會。

```html
<button v-bind:disabled="isButtonDisabled">Button</button>

當 buttonDisabled 的值為 true 時，disabled 屬性會被加上

var obj = {
  isButtonDisabled: true,
};

var app = new Vue({
  el: "#app",
  data: obj,
});

<button disabled="disabled">Button</button>

當 buttonDisabled 的值為 null、undefined、false 時，disabled 屬性不會被加上

var obj = {
  isButtonDisabled: undefined,
};

var app = new Vue({
  el: "#app",
  data: obj,
});

<button>Button</button>

Reference

• https://v2.vuejs.org/v2/guide/syntax.html